<template>
  <el-transfer :data="options" v-bind="transferAttrs" />
</template>

<script setup lang="ts">
import useHttp from '@/hooks/useHttp'

interface Props {
  optionLabel: string
  optionValue: string
  remote: FormGlobal
  transferAttrs: FormGlobalTransferField['attrs']
}

const props = defineProps<Props>()

const options = shallowRef<Array<Record<string, any>>>([])

const { request, data } = useHttp<ApiResponseData<Array<Record<string, any>>>>()

onMounted(async () => {
  await request(props.remote.action, props.remote.model, {
    method: props.remote.method
  })

  if (data.value?.status) {
    options.value = data.value.data.map((o) => ({
      label: o[props.optionLabel],
      key: o[props.optionValue]
    }))
  }
})
</script>

<style scoped lang="scss"></style>
